<template>
    <div class="seamless-scroll-table">
      <el-table
        :data="tableData"
        :columns="tableColumns"
        :header-cell-style="{ display: showHeader ? 'table-cell' : 'none' }"
        style="overflow: hidden"
      >
        <template #body-wrapper>
          <div
            class="el-table__body-wrapper"
            ref="scrollWrapper"
            :style="{ height: tableHeight + 'px' }"
          >
            <div class="el-table__body" ref="scrollContent">
              <table>
                <tbody>
                  <tr
                    v-for="(row, index) in tableData"
                    :key="index"
                    :class="`el-table__row ${index % 2 === 0 ? 'el-table__row--striped' : ''}`"
                  >
                    <td v-for="(column, colIndex) in tableColumns" :key="colIndex">
                      {{ row[column.prop] }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </template>
      </el-table>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted, nextTick } from 'vue';
  const props = defineProps({
    tableData: {
      type: Array,
      default: () => []
    },
    tableColumns: {
      type: Array,
      default: () => []
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    tableHeight: {
      type: Number,
      default: 300
    }
  });
  
  const scrollWrapper = ref(null);
  const scrollContent = ref(null);
  let scrollInterval = null;
  
  const startScroll = () => {
    if (scrollContent.value.offsetHeight > scrollWrapper.value.offsetHeight) {
      scrollInterval = setInterval(() => {
        const wrapper = scrollWrapper.value;
        const content = scrollContent.value;
        if (wrapper.scrollTop >= content.offsetHeight / 2) {
          wrapper.scrollTop = 0;
        } else {
          wrapper.scrollTop++;
        }
      }, 30);
    }
  };
  
  const stopScroll = () => {
    clearInterval(scrollInterval);
  };
  
  onMounted(() => {
    nextTick(() => {
      const originalData = props.tableData;
      const newData = [...originalData, ...originalData];
      scrollContent.value.innerHTML = scrollContent.value.innerHTML + scrollContent.value.innerHTML;
      startScroll();
    });
  });
  
  onUnmounted(() => {
    stopScroll();
  });
  </script>
  
  <style scoped>
  .seamless-scroll-table .el-table__body-wrapper {
    overflow: hidden;
  }
  
  .seamless-scroll-table .el-table__body-wrapper::-webkit-scrollbar {
    display: none;
  }
  </style>